<template>
    <div class="mainDiv">
        <el-row :gutter="20" class="rowHead">
            <el-col :span="12">
                <el-button type="success" icon="el-icon-plus" class="mr" @click="addguest" v-qx="quanxian.add">新增客户</el-button>
                <el-select v-model="page.lv" placeholder="请选择分类" @change="getList" v-qx="quanxian.level">
                    <el-option label="请选择会员等级" value="">
                    </el-option>
                    <el-option v-for="item in viplist" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="9">
                <el-input class="fr w300" placeholder="搜索客户姓名、会员号、顾客电话" @keyup.enter.native="getList" v-model="page.search">
                    <i slot="suffix" class="el-icon-search" style="line-height: 40px;width: 25px;cursor: pointer;" @click="getList"></i>
                </el-input>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" icon="el-icon-h-shuaxin1" style="float:right" @click="refresh">刷新列表</el-button>
            </el-col>
        </el-row>
        <el-table :data="glist" :stripe="true" height="100%" @sort-change="sorts">
            <el-table-column type="index" :index="gIndex"></el-table-column>
            <el-table-column prop="name" label="客户姓名">
                <template slot-scope="scope">
                    <span @click="openGuestPage(scope.row.id)" style="cursor:pointer;color:#f50">{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="vipcard" label="会员号"></el-table-column>
            <el-table-column prop="sex" label="性别">
                <template slot-scope="scope">
                    <i style="color: #20a0ff;" class="el-icon-h-nan1" v-if="scope.row.sex"></i>
                    <i style="color: #ff9320;" class="el-icon-h-nv1" v-else></i>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="顾客电话"></el-table-column>
            <el-table-column prop="vipname" label="会员等级"></el-table-column>
            <el-table-column prop="count" label="服务人数"></el-table-column>
            <el-table-column prop="addtime" label="注册日期">
                <template slot-scope="scope">
                    {{scope.row.addtime|dateTime}}
                </template>
            </el-table-column>
            <el-table-column prop="initial_info" label="起初状态">
                <template slot-scope="scope">
                    <el-tag type="success'" size="mini" v-if="scope.row.initial_info>0">已审核</el-tag>
                    <el-tag type="danger" size="mini" v-else>未审核</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="arrivetime" label="最后到店">
                <template slot-scope="scope">
                    {{scope.row.arrivetime|dateTime}}
                </template>
            </el-table-column>
            <el-table-column prop="balance" label="余额" sortable="custom">
            </el-table-column>
            <el-table-column prop="giftbalance" label="赠送余额" sortable="custom">
            </el-table-column>
            <el-table-column label="信息操作" width="120">
                <template slot-scope="scope">
                    <el-dropdown @command="moreMenu" trigger="click">
                        <el-button size="mini" type="primary">更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="{id:scope.row.id,tp:1}" v-qx="quanxian.initial">起初详情</el-dropdown-item>
                            <el-dropdown-item :command="{row:scope.row,tp:2}" v-qx="quanxian.edit">编辑信息</el-dropdown-item>
                            <el-dropdown-item :command="{id:scope.row.id,tp:3}" :disabled="scope.row.initial_info===0" v-qx="quanxian.allot">分配员工</el-dropdown-item>
                            <el-dropdown-item :command="{id:scope.row.id,tp:4}" :disabled="scope.row.initial_info===0" v-qx="quanxian.xiaofei">消费详情</el-dropdown-item>
                            <el-dropdown-item :command="{id:scope.row.id,tp:5}" :disabled="scope.row.initial_info===0" v-qx="quanxian.recharge">账户充值</el-dropdown-item>
                            <el-dropdown-item :command="{id:scope.row.id,tp:6}" :disabled="scope.row.initial_info===0" v-qx="quanxian.opencard">前去开卡</el-dropdown-item>
                            <el-dropdown-item :command="{id:scope.row.id,tp:7}" :disabled="scope.row.initial_info===0" v-qx="quanxian.order">前去开单</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 14px;">
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.pages" :page-sizes="[15, 30, 50, 100]" :page-size="page.limits" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import C from '#/src/common/common.js'
import Guest from '#/src/shop/guest.js'
import P from '#/src/shop/popup.js'

export default {
    name: 'guestList',
    data() {
        return {
            glist: [],
            total: 0,
            viplist: [],
            page: {
                pages: 1,
                limits: 15,
                search: '',
                lv: '',
                highSearch: [],
                searchType: 1,
                orderCol: '',
                orderBy: ''

            },
            quanxian: {
                add: 'guest_add',
                edit: 'guest_edit',
                look: 'guest_look',
                allot: 'guest_allot',
                level: 'guest_level',
                initial: 'guest_initial',
                xiaofei: 'guest_xiaofei',
                recharge: 'guest_recharge',
                opencard: 'guest_opencard',
                order: 'guest_order',
            },
            browserOptions: {
                width: 1400,
                height: 880,
                transparent: true,
                // openDevTools: true,
                frame: false,
                useSpa: true,
                spaModel: 'shop'
            }
        }
    },
    methods: {
        async moreMenu(com) {
            var that = this
            if (com.tp === 1) {

                let res = await C.openBrowserWindow('/guestDetail', { guestid: com.id }, this.browserOptions)
                if (res) C.success(res.data)
                that.getList()

            } else if (com.tp === 2) {
                let res = await Guest.openAddGuest(com.row)
                if (res && res.data) {
                    C.success(res.data)
                    this.getList()
                }

            } else if (com.tp === 3) {

                let res = await C.openBrowserWindow('/allotGuest', { id: com.id }, this.browserOptions)
                if (res) C.success(res.data)
                this.getList()

            } else if (com.tp === 4) {
                Guest.openGuestPage(com.id)
                
            } else if (com.tp === 5) {
                let res = await P.openRechargePopup({ gid: com.id })
                if (res && res.data) C.success(res.data)

            } else if (com.tp === 6) {
                let res = await P.openCardPopup({ gid: com.id })
                if (res) C.success('操作成功！')

            } else if (com.tp === 7) {
                let res = await P.openOrderPopup({ gid: com.id })
                if (res) C.success('操作成功！')
            }
        },

        async addguest() {
            let res = await Guest.openAddGuest()
            if (res && res.data) {
                C.success(res.data)
                this.getList()
            }
        },

        // 启用、弃用顾客
        async shanchu(id, status) {
            if (status) {
                C.confirm('请确定当前顾客是否已流失？', async() => {
                    await C.ajax('/shop/guest/gueststatus', { id: id, status: status }, 'post')
                    this.getList()
                })
            } else {
                await C.ajax('/shop/guest/gueststatus', { id: id, status: status }, 'post')
                this.getList()
            }
        },

        sizeChange: function(val) {
            this.page.limits = val
            this.getList()
        },

        currentChange: function(val) {
            this.page.pages = val
            this.getList()
        },

        gIndex(index) {
            return (this.page.pages - 1) * this.page.limits + index + 1
        },

        async getList() {
            this.page.searchType = 1
            let data = await C.ajax('/shop/guest/guestlist', this.page, 'post')
            if (data) {
                this.glist = data.data
                this.total = data.count
            }
        },
        async getLevel() {
            let res = await C.ajax('/shop/guest/getlevels', {}, 'post')
            if (res) {
                res.forEach((v) => {
                    this.viplist.push({
                        id: v.id,
                        name: v.vipname
                    })
                })
            }
        },

        refresh: function() {
            this.getList()
        },
        openGuestPage(id) {
            Guest.openGuestPage(id)
        },
        sorts (obj) {
            this.page.orderCol = obj.prop
            this.page.orderBy = obj.order
            this.getList()
        }
    },
    mounted: function() {
        this.getLevel()
        this.getList()
    }

}
</script>